<template>
    <van-swipe-cell right-width="65" left-width="65">
      <div slot="left" class="shop-cell-left">取消</div>
        <div id="shop-item">
        <div class="item-selector">
          <check-button :is-checked="itemInfo.checked" @click.native="checkedClick"></check-button>
        </div>
        <div class="item-img">
          <img :src="itemInfo.image" alt="">
        </div>
        <div class="item-info">
          <div class="item-title">{{itemInfo.name}}</div>
          <div class="info-bottom">
            <div class="item-price">￥{{itemInfo.price}}</div>
            <div class="item-count">x{{itemInfo.count}}</div>
          </div>
        </div>
      </div>
      <div slot="right" class="shop-cell-right" @click="rightClick(itemInfo.id)">删除</div>
    </van-swipe-cell>
</template>

<script>
import { mapMutations } from 'vuex'
import CheckButton from './CheckButton.vue'
export default {
  name: 'ShopcarItem',
  props: {
    itemInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    CheckButton
  },
  methods: {
    ...mapMutations(['removeGoodsById']),
    checkedClick () {
      this.itemInfo.checked = !this.itemInfo.checked
    },
    rightClick (id) {
      console.log(id)
      this.removeGoodsById(id)
    }
  }
}
</script>

<style lang='scss' scoped>
#shop-item{
  padding: 20px 5px;
  width: 96%;
  margin:10px auto;
  display: flex;
  background: #fff;
  border-radius: .2rem;
  border-bottom: 2px solid #ccc;
  border-top: 2px solid #ccc;
  .item-selector{
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  .item-img{
    border: 1px solid rgb(224, 224, 224);
    img{
      width: 100px;
    }
  }
  .item-info{
    flex: 1;
    padding: 5px 10px;
    overflow: hidden;
    font-size: 18px;
    position: relative;
    .item-title{
      height: 50%;
      width: 100%;
      overflow: hidden; // 超出的部分隐藏
      text-overflow: ellipsis; //超出部分用省略号显示
      display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
      -webkit-box-orient: vertical;//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
      -webkit-line-clamp: 2;//这个属性不是css的规范属性，需要组合上面的两个属性，2表示显示的行数(我这里仅写2，可以是任何数字)
      padding: 6px 0px;
      font-weight: bold;
    }
    .info-bottom{
      position: absolute;
      bottom: 5px;
      width: 100%;
      display: flex;
      .item-price{
        flex: 1;
        color: #dd524d;
        font-size: 20px;
        font-weight: bold;
      }
      .item-count{
        flex: 1;
      }
    }
  }
}
.shop-cell-left,
.shop-cell-right{
  height: 147px;
  width: 50px;
  color: #fff;
  line-height: 147px;
  text-align: center;
}
.shop-cell-left{
 background-color: lime;
}
.shop-cell-right{
  background-color: red;
}
</style>
